<!-- 吹哨满意度统计 -->
<template>
  <div style="height: 40%">
    <JxcsTitle title="吹哨满意度统计" />
    <div class="chunk_con" id="Violations" ref="Violations"></div>
  </div>
</template>
  
  <script>
// import { getViolationsScreen } from '@/api/index'
import { JieXiangChuiShaoDB } from '@/api'
import JxcsTitle from '@/components/JxcsTitle'

export default {
  components: {
    JxcsTitle
  },
  props: {
    satisfactionLeve: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    satisfactionLeve(newVal) {
      this.optionData = newVal.map((item) => {
        return {
          name: item.type,
          value: item.num
        }
      })
      this.renderChart()
    }
  },
  // mounted() {
  //   this.getList()
  // },
  data() {
    return {
      optionData: []
    }
  },
  beforeDestroy() {
    this.desHander()
  },
  methods: {
    renderChart() {
      const myChart = echarts.init(this.$refs.Violations)
      let self = this
      let option = {
        color: ['#FF3D6E', '#80FA50', '#FF9159', '#FFDB6A', '#62A0FD', '#DF11FC', '#FF6A72', '#00FFFE', '#008EFC'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: '1%',
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 12,
            fontWeight: 'bold'
          },
          formatter: function (name) {
            if (name) {
              const param = self.optionData.find((v) => v.name === name)
              return name + '  ' + param.value + ' %'
            }
            return
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#0a1a2a',
              borderWidth: '5'
            },
            label: {
              show: false,
              formatter: function (params) {
                return `${params.name} ${params.value}%`
              }
            },
            labelLine: {
              show: false,
              length: 10,
              lineStyle: {
                width: 2,
                type: 'dotted'
              }
            },
            data: this.optionData
          }
        ]
      }
      myChart.setOption(option)
    },

    desHander() {
      let myChart = echarts.init(this.$refs.Violations)
      myChart.dispose()
    }
  }
}
</script>
  
  <style lang="less" scoped>
.chunk_con {
  height: calc(100% - 80px);
}
</style>
  